<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: guoxiaomin
 * @Email: 1093556028@qq.com
 * @Date: 2019-03-14 20:15:39
 * @LastEditors: guoxiaomin
 * @LastEditTime: 2019-09-11 18:05:57
 -->
<template lang="html">
  <section class="input_verify">
    <label
      v-if="labelName || labelName === 0"
      @click="focus"
      :for="labelFor"
    >
      {{labelName}}
    </label>
    <input
      :style="{backgroundColor:inputColor, height:inputHeight}"
      :class="[
        'input_verify__inner',
        showAlert ? 'error' : '',
        showSuccess ? 'success' : ''
      ]"
      :type="type"
      :value="currentValue"
      :readonly="readonly"
      :disabled="disabled"
      :autocomplete="autocomplete"
      :id="labelFor"
      :placeholder="placeholder"
      @input="handleInput"
      @focus="handleFocus"
      @blur="handleBlur"
      @change="handleChange"
      ref="input"
    >
    <transition name="zoom_in_top">
      <span class="alarm_info" v-if="showAlert"><i v-if="icon" class="alarm_icon"><img :src="icon"></i>{{alarmInfo}}</span>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'InputVerify',
  props: {
    type: {
      type: String,
      default: 'text'
    },
    icon: {
      type: String,
      default: ''
    },
    value: [String, Number],
    labelName: {
      type: [String, Number],
      default: ''
    },
    autocomplete: {
      type: String,
      default: 'off'
    },
    readonly: Boolean,
    disabled: Boolean,
    labelFor: {
      type: String,
      default: ''
    },
    rules: {
      type: [Array, Object],
      default: () => {}
    },
    placeholder: {
      type: String,
      default: ''
    },
    doNotShowSuccess: {
      type: Boolean,
      default: false
    },
    inputColor: {
      type: String,
      default: '#ffffff'
    },
    inputHeight: {
      type: String,
      default: '0.8rem'
    }
  },
  watch: {
    value (val, oldValue) {
      this.setCurrentValue(val)
    }
  },
  data () {
    return {
      showSuccess: false,
      showAlert: false,
      alarmInfo: '',
      currentValue: this.value === undefined || this.value === null
        ? ''
        : this.value,
      isRequired: false
    }
  },
  methods: {
    focus () {
      this.$refs.input.focus()
    },
    handleFocus (event) {
      this.$emit('focus', event)
    },
    handleBlur (event) {
      this.$emit('blur', event)
    },
    handleInput (event) {
      const value = event.target.value
      this.setCurrentValue(value)
      this.$emit('input', value)
    },
    handleChange (event) {
      this._validate()
      this.$emit('change', event.target.value)
    },
    setCurrentValue (value) {
      this.currentValue = value
    },
    _validate () {
      let situation = true
      // 先判断是否必填
      for (let i = 0; i < this.rules.length; i++) {
        if (this.rules[i].required) {
          this.isRequired = true
          this.rules[i].partern = /\S/
          break
        } else {
          this.isRequired = false
        }
      }
      for (let j = 0; j < this.rules.length; j++) {
        const _reg = this.rules[j].partern
        // 非必填时候未输入，不进正则判断
        // 非必填时输入，进入正则
        // 必填时候无论是否输入，都进正则判断
        const _hasInput = this.isRequired || this.currentValue.length > 0
        if (!_reg.test(this.currentValue) && _hasInput) {
          this.alarmInfo = this.rules[j].msg
          this.showSuccess = false
          this.showAlert = true
          situation = false
          break
        }
      }
      if (situation) {
        this.alarmInfo = ''
        if (!this.doNotShowSuccess) {
          this.showSuccess = true
        }
        this.showAlert = false
      }
      return situation
    }
  }
}
</script>

<style lang="less" scoped>
.input_verify {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0 none;
  outline: none;
  margin-left: 0.51rem;
  label {
    float: left;
    width: 1.35rem;
    box-sizing: border-box;
    padding: 0 .12rem 0 0;
    vertical-align: middle;
    font-size: .24rem;
    line-height: .6rem;
    color: #606266;
  }
  .input_verify__inner {
    outline: none;
    display: block;
    width: 100%;
    // width: 60%;
    box-sizing: border-box;
    // padding: 0 .15rem;
    // border: 1px solid #dcdfe6;
    border: 0;
    // border-radius: .04rem;
    font-size: .18rem;
    height: .8rem;
    line-height: .6rem;
    color: #606266;
    background-color: #fff;
    background-image: none;
    appearance: none;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    &.error {
      border-color: #fc5947;
    }
    &.success {
      border-color: #67c23a;
    }
    &[disabled] {
      background-color: #f5f7fa;
      border-color: #e4e7ed;
      color: #c0c4cc;
      cursor: not-allowed;
    }
  }
  .alarm_icon {
    display: inline-block;
    width: .2rem;
    height: .24rem;
    margin-right: .05rem;
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .alarm_info {
    position: absolute;
    left: 0;
    font-size: .18rem;
    color: #fc5947;
    transform-origin: center top;
  }
}
.zoom_in_top-enter-active,
.zoom_in_top-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: all 0.1s;
}
.zoom_in_top-enter,
.zoom_in_top-leave-to {
  opacity: 0;
  transform: scaleY(0);
}
</style>
